<template>
    <div class="app-container">
            <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
                <el-form-item label="专业名称" prop="subjectName">
                <el-input
                    v-model="queryParams.subjectName"
                    placeholder="请输入专业名称"
                    clearable
                    size="small"
                    style="width: 180px"
                    @keyup.enter.native="handleQuery"
                />
            </el-form-item>

            <!-- <el-form-item label="状态" prop="status">
                <el-select
                    v-model="queryParams.status"
                    placeholder="专业状态"
                    clearable
                    size="small"
                    style="width: 240px"
                >
                    <el-option
                    v-for="dict in statusOptions"
                    :key="dict.dictValue"
                    :label="dict.dictLabel"
                    :value="dict.dictValue"
                    />
                </el-select>
            </el-form-item> -->

            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>
        <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
        >新增</el-button>
      </el-col>
    </el-row>

      <el-table v-loading="loading" :data="subjectList">
      <el-table-column label="序号" align="center" prop="id" width="60" />
      <el-table-column label="专业名称" align="center" prop="subjectName" :show-overflow-tooltip="true" />
      <el-table-column label="状态" align="center">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.status"
            active-value="1"
            inactive-value="0"
            @change="handleStatusChange(scope.row)"
          />
        </template>
      </el-table-column>
      <el-table-column label="创建时间" align="center" prop="createTime">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="修改时间" align="center" prop="modifyTime">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.modifyTime) }}</span>
        </template>
      </el-table-column>

     

      <el-table-column label="操作" align="center" width="180">
        <template slot-scope="scope">
          <el-button
            size="mini"
            circle
            type="success"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
          />
          <el-button
            size="mini"
            circle
            type="danger"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
          />
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getSubjectList"
    />

    <el-dialog :title="title" :visible.sync="open" width="650px">
      <el-form ref="form" :model="form" :rules="rules" label-width="95px">
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-form-item label="专业名称" prop="subjectName">
              <el-input v-model="form.subjectName" placeholder="请输入专业名称" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
</div>

</template>
<script>
import {listBSubject, createOrUpdateSubject, delBSubject, changeBSubjectStatus } from "@/api/basedata/bsubject";

export default {
    data() {
        return {
        // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
            },
            // 是否显示弹出层
            open: false,
            total: 0,
            title: '',
            // 表单参数
            form: {},
            subjectList: [],
            loading: false,
            rules: {
            subjectName: [
                    { required: true, message: "专业名称不能为空", trigger: "blur" }
                ],
            }
        }
    },
    created() {
        this.getSubjectList();
    },
    methods: {
        handleAdd() {
            this.reset();
            this.open = true;
            this.title = "添加专业信息";
        },
        // 表单重置
        reset() {
            this.form = {
                id: undefined,
                subjectName: undefined
            };
        
            this.resetForm("form");
        },
          /** 重置按钮操作 */
        resetQuery() {
        this.resetForm("queryForm");
        this.getSubjectList();
        },
          // 学员状态修改
        handleStatusChange(row) {
            let text = row.status === "1" ? "启用" : "停用";
            this.$confirm(
                '是否' + text + row.subjectName + '?',
                "警告",
                {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
                }) 
            .then(function() {
                return changeBSubjectStatus(row.id, row.status);
                })
            .then(() => {
                this.msgSuccess(text + "成功");
                })
                .catch(function() {
                row.status = row.status === "0" ? "1" : "0";
                });
        },
        handleUpdate(row) {
            this.reset();
            this.form = JSON.parse(JSON.stringify(row))
            this.title = "修改专业";
            this.open = true; 
        },
        // 取消按钮
        cancel() {
            this.reset()
            this.open = false;
        },
         /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getSubjectList();
        },
        getSubjectList() {
            listBSubject(this.queryParams).then(resp => {
                if(resp.code === 200) {
                    this.subjectList = resp.data.list
                }
            })
        },
        submitForm() {
            this.$refs["form"].validate(valid => {
            if (valid) {
                createOrUpdateSubject(this.form).then(resp => {
                    if(resp.code === 200) {
                        this.msgSuccess(resp.message);
                        this.open = false;
                        this.getSubjectList();
                    }else {
                        this.msgError(resp.message);
                    }
                })
            }
            })
        },
        handleDelete(item) {
            delBSubject(item.id).then(resp => {
                if(resp.code === 200) {
                    this.msgSuccess("删除成功")
                    this.getSubjectList();
                } else {
                    this.msgError("删除失败")
                }
            })
        }
    }
}
</script>
<style scoped>

</style>